<template>
  <!-- <div id="add-event" @click="addEvnetPoint">事件添加</div> -->
  <el-dropdown>
    <div class="el-dropdown-link">事件添加</div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="addEvnetPoint" v-if="isActive">开始添加</el-dropdown-item>
        <el-dropdown-item disabled v-else>开始添加</el-dropdown-item>
        <el-dropdown-item @click="cancel">停止添加</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <el-card class="box-card" id="popup">
    <template #header>
      <div class="card-header">
        <h5>添加事件</h5>
        <div @click="closePopup">
          <el-icon>
            <CloseBold />
          </el-icon>
        </div>
      </div>
    </template>
    <table class="event-tabele">
      <tr>
        <td>事件编号</td>
        <td>{{ eventNumber }}</td>
      </tr>
      <tr>
        <td>事件类型</td>
        <td>
          <el-select size="small" v-model="eventType">
            <el-option value="碰撞" label="碰撞" />
            <el-option value="刮擦" label="刮擦" />
            <el-option value="追尾" label="追尾" />
            <el-option value="碾压" label="碾压" />
            <el-option value="翻车" label="翻车" />
            <el-option value="失火" label="失火" />
            <el-option value="其他" label="其他" />
          </el-select>
        </td>
      </tr>
      <tr>
        <td>事件等级</td>
        <td>
          <el-select size="small" v-model="eventLevel">
            <el-option label="轻微事故" value="1" />
            <el-option label="一般事故" value="2" />
            <el-option label="重大事故" value="3" />
            <el-option label="特大事故" value="4" />
          </el-select>
        </td>
      </tr>
      <tr>
        <td>发生时间</td>
        <td>
          <el-date-picker v-model="eventTime" type="datetime" placeholder="请输入时间" format="YYYY/MM/DD hh:mm"
            value-format="YYYY.MM.DD hh:mm" style="width: 190px; height: 24px;" />
        </td>
      </tr>
      <tr>
        <td>发生地点</td>
        <td>
          <el-input v-model.trim="eventAddress" placeholder="请输入地址" />
        </td>
      </tr>
      <tr>
        <td>车牌号</td>
        <td>
          <el-input v-model.trim="carNumber" placeholder="请输入车牌号" />
        </td>
      </tr>
      <tr>
        <td>驾驶员</td>
        <td>
          <el-input v-model.trim="driver" placeholder="请输入驾驶员" />
        </td>
      </tr>
      <tr>
        <td>处理状态</td>
        <td>
          <el-select size="small" v-model="handlingStatus">
            <el-option label="待处理" value="0" />
            <el-option label="处理中" value="1" />
            <el-option label="已归档" value="2" />
          </el-select>
        </td>
      </tr>
    </table>
    <div class="card-footer">
      <el-button type="primary" @click="submitData">提交</el-button>
      <el-button plain @click="cancel">取消</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { inject, onMounted, ref } from "vue";
import { createDraw } from "../../../../utils/createDraw";
import { CloseBold } from "@element-plus/icons-vue";
import { addPoint } from "./utils/addEventPoint";
const $map = ref();
const $docLayer = ref();
const popup = ref(null);
const draw = ref();
const position = ref();
const eventNumber = ref();
const eventType = ref("碰撞");
const eventLevel = ref('1');
const eventTime = ref('');
const eventAddress = ref('');
const carNumber = ref('');
const driver = ref('');
const handlingStatus = ref('0');
const isActive = ref(true)
onMounted(() => {
  $map.value = inject("$map");
  $docLayer.value = inject("$docLayer");
  var container = document.getElementById("popup");
  popup.value = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: "bottom-center",
    //是否应该停止事件传播到地图窗口
    stopEvent: true,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250,
    },
  });
});
//点击事件添加按钮
function addEvnetPoint() {
  eventNumber.value = "SJ" + new Date().getTime();
  draw.value = createDraw({
    type: "Point",
  });
  $map.value.addInteraction(draw.value);
  draw.value.on("drawend", handleDraw);
  isActive.value = false
}
function cancel() {
  isActive.value = true
  if (draw.value) {
    draw.value.un("drawend", handleDraw);
    $map.value.removeInteraction(draw.value);
  }
  if(popup.value){
    popup.value.setPosition(undefined);
  }
}
// 获取坐标并打开弹窗
function handleDraw(evt) {
  position.value = evt.feature.getGeometry().getCoordinates();

  $map.value.addOverlay(popup.value);
  popup.value.setPosition(position.value);
}
//关闭弹窗按钮
function closePopup() {
  popup.value.setPosition(undefined);
}
//确定添加
function submitData() {
  if (
    carNumber.value === "" ||
    driver.value === "" ||
    eventAddress.value === "" ||
    eventTime.value === ""
  ) {
    ElMessage({
      showClose: true,
      message: "请将信息输入完整",
      type: "warning",
    });
  } else {
    const attr = [
      { name: "事件编号", type: "string", value: eventNumber.value },
      { name: "事件类型", type: "string", value: eventType.value },
      { name: "事件等级", type: "number", value: eventLevel.value },
      { name: "发生时间", type: "string", value: eventTime.value },
      { name: "发生地点", type: "string", value: eventAddress.value },
      { name: "车牌号", type: "string", value: carNumber.value },
      { name: "驾驶员", type: "string", value: driver.value },
      { name: "处理状态", type: "string", value: handlingStatus.value },
      { name: "mpLayer", type: "number", value: 0 },
    ];
    const service = {
      name: "guanggu",
      layerId: 2,
    };
    addPoint({
      position: position.value,
      attr,
      service,
      // docLayer: $docLayer.value,
      callback: onPntSuccess(),
    });
  }
}
//成功回调
function onPntSuccess() {
  return function (data) {
    if (data.succeed) {
      ElMessage({
        message: '添加点要素成功！',
        type: 'success',
      });
      $docLayer.value.refresh();
      popup.value.setPosition(undefined);
      eventNumber.value = "SJ" + new Date().getTime();
      eventType.value = "碰撞";
      eventLevel.value = "1";
      eventTime.value = "";
      eventAddress.value = "";
      carNumber.value = "";
      driver.value = "";
      handlingStatus.value = "1";
    } else {
      ElMessage({
        message: '添加点要素失败！',
        type: 'success',
      });
    }
  };
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;

  :deep(:focus-visible) {
    outline: none !important;
  }
}

#popup {
  position: fixed;
  width: 350px;
  z-index: 100;
  background-color: #fff;

  .el-input {
    width: 190px;
    height: 24px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .event-tabele {
    border-collapse: collapse;
    margin: 0 auto 15px;
    width: 100%;
    border-radius: 10px;

    td,
    th {
      font-size: 13px;
      height: 15px;
      width: auto;
      border: 1px solid rgb(179, 175, 175);
      padding: 5px;
    }
  }

  .card-footer {
    text-align: center;
  }
}
</style>
